<template>
  <div class="main">
    <div :id="cid" class="item"></div>
    <el-card class="sub">
      <div v-for="o in 4" :key="o">
        {{'图标说明 ' + o }}
      </div>
    </el-card>
  </div>
</template>

<script>
import * as d3 from 'd3';
import 'd3-selection'
export default {
  name: "StreamgraphTransitions",
  props:['cid','height'],
  mounted() {

    let height = this.height.slice(0, -2)
    let width = d3.select(`#${this.cid}`).attr('width') || 900
    let n = 20 // number of layers
    let m = 100 // number of samples per layer
    let k = 10 // number of bumps per layer
    let z = d3.interpolateCool,
        y = d3.scaleLinear([0, 1], [height, 0]),
        x = d3.scaleLinear([0, m - 1], [0, width]);
    let stack = d3.stack()
        .keys(d3.range(n))
        .offset(d3.stackOffsetWiggle)
        .order(d3.stackOrderNone)
    let area = d3.area()
        .x((d, i) => x(i))
        .y0(d => y(d[0]))
        .y1(d => y(d[1]))
    const svg = d3.select(`#${this.cid}`).append('svg')
        .attr("viewBox", [0, 0, width, height]);
    const path = svg.selectAll("path")
        .data(randomize)
        .join("path")
        .attr("d", area)
        .attr("fill", () => z(Math.random()));

        path
          .data(randomize)
          .transition()
          .duration(1500)
          // .attr("d", area)

    // Inspired by Lee Byron’s test data generator.
    function bump(a, n) {
      const x = 1 / (0.1 + Math.random());
      const y = 2 * Math.random() - 0.5;
      const z = 10 / (0.1 + Math.random());
      for (let i = 0; i < n; ++i) {
        const w = (i / n - y) * z;
        a[i] += x * Math.exp(-w * w);
      }
    }
    function bumps(n, m) {
        const a = [];
        for (let i = 0; i < n; ++i) a[i] = 0;
        for (let i = 0; i < m; ++i) bump(a, n);
        return a;
      }
    function randomize() {
      const layers = stack(d3.transpose(Array.from({length: n}, () => bumps(m, k))));
      y.domain([
        d3.min(layers, l => d3.min(l, d => d[0])),
        d3.max(layers, l => d3.max(l, d => d[1]))
      ]);
      return layers;
    }

  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end
}
.item{
  flex-grow:1;
  flex-shrink:1;
}
.sub{
  max-width: 300px;
  min-width: 200px;
  flex-grow:1;
  flex-shrink:0;
}
</style>